<template>
  <div>

    <el-container>
          <el-header>
            
              <el-row :gutter="10">
               <el-col :span="6"><el-button type="primary" @click="goIndex">返回首页</el-button></el-col>
              </el-row>
          </el-header>



        <el-main>
          <el-table
              ref="multipleTable"
              :data="shopCarList"
              style="width: 100%"
              @selection-change="handleSelectionChange">>
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="bookName"
                label="图书名字">
            </el-table-column>

            <el-table-column label="图书图片">
              <template slot-scope="scope">
                <el-image style="width: 200px;height:200px" :src="scope.row.bookImage"></el-image>
              </template>
            </el-table-column>


            <el-table-column
                label="图书购买数量"
                width="200px"
            >
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.bookCount" @change="handleChange" :min="0" :max="100000" label="label"></el-input-number>
              </template>

            </el-table-column>
            <el-table-column
                prop="price"
                label="价格"
                width="180">
            </el-table-column>


            <el-table-column
                label="总价"
            >
              <template slot-scope="scope">
                {{scope.row.bookCount * scope.row.price}}

              </template>

            </el-table-column>

            <el-table-column label="加入购物车时间">
              <template slot-scope="scope">
                {{$moment(String(scope.row.createTime)).format('YYYY-MM-DD hh:mm:ss')}}
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>


          <div class="footer">
            <el-row :gutter="10">
              <el-col :span="12" style="font-size:40px"> <span>总计:</span> {{buyMoney}}元</el-col>
              <el-col :span="6">   <el-button @click="clear">清空购物车</el-button></el-col>
              <el-col :span="6">   <el-button  type="primary">结账买单</el-button></el-col>
            </el-row>





          </div>
        </el-main>

    </el-container>



  </div>
</template>

<script>
import {listSearch} from "@/config/mixin/searchMixin";
import Cookie from "js-cookie";




export default {
  data() {
    return {
      userInfo: [],
      shopCarList:[],
      selectList:[],

    }
  },

  computed: {
    buyMoney() {
      let  money = 0;
      this.selectList.forEach( item =>{
          money += item.price*item.bookCount;
      })
      return parseFloat(money).toFixed(4);
    }
  },
  mixins: [listSearch],
  created() {
    this.userInfo = JSON.parse(Cookie.get('userInfo'));
    this.getShopCarInfoByUser();
  },
  methods: {
    goIndex(){
      this.$router.push('index');
    },
    clear(){
      this.$refs.multipleTable.clearSelection();
    },
    getShopCarInfoByUser() {
          let params = {
            url:'shopCar/shopCarVo',
            method:'get',
            payload:{
              userId:this.userInfo.id,
            }
          }
          this.sendReq(params,res =>{
            console.log(res);
            this.shopCarList = res.data;

            this.$nextTick(()=>{
                this.shopCarList.forEach( item => {
                  if(item.status == 1){
                    this.$refs.multipleTable.toggleRowSelection(item,true);
                  }

                  if(item.status == 0){
                    this.$refs.multipleTable.toggleRowSelection(item,false);
                  }
                })

            })
          })
    },
    // 点击选中出发事件
    handleSelectionChange(val){
        this.selectList = val;
    },
    handleChange(data){
      console.log(data);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      this.$refs.multipleTable.toggleRowSelection(row,false);

      this.shopCarList.splice(index,1);


      let params = {
        url:'shopCar',
        method:'delete',
        payload: {
          idList:row.id
        }
      }


      this.sendReq(params, res => {
        console.log(res);
        this.$message("删除成功")
      })
    }
  },
}
</script>

<style  scoped>
  .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #67C23A;

  }
</style>